<template>
  <view>
    <sign :sign-tasks="signTasks" :status="status" :course-id="courseId"/>
    <view class="btn">
      <u-button size="medium" shape="circle" type="primary" @click="postSignTask" :ripple="true" ripple-bg-color="#a0cfff">发布签到</u-button>
    </view>
  </view>
</template>

<script>
import sign from "../../components/sign/sign";
export default {
  data() {
    return {
      signTasks: [],
      status: '',
      courseId: 1,
      page: 1,
      total: 0,
      id: ''
    };
  },
  onLoad(e) {
    this.courseId = e.id;
    this.initial();
    uni.$on("signInitial",this.initial);
  },
  components:{
    sign
  },
  onPullDownRefresh(){
    this.initial();
  },
  onReachBottom() {
    this.page = ++ this.page;
    this.status = 'loading';
    if((this.page - 1) * 10 > this.total) {
      setTimeout(() => {
        this.status = 'nomore';
      }, 1000)
    }else {
      this.getSignTaskList().then(res => {
        this.total = res.total;
        this.signTasks = this.signTasks.concat(res.data);
      });
      this.status = 'loadmore';
    }
  },
  methods:{
    initial(){
      this.page = 1;
      this.total = 0;
      this.getSignTaskList().then(res => {
        this.signTasks = res.data;
        this.total = res.total;
        uni.stopPullDownRefresh();
      })
    },
    async getSignTaskList(){
      let data = await this.$u.api.getSignTaskByCourseId(this.courseId, {pageNum: this.page});
      return data;
    },
    postSignTask(){
      this.$u.route({
        url: '/pages/post_sign_task/post_sign_task',
        params: {
          courseId: this.courseId
        }
      });
    }
  }
}
</script>

<style lang="scss">
.btn {
  bottom: 0;
  position: fixed;
  left: 34%;
  margin-bottom: 20rpx;
}
</style>
